<template>
  <template v-for="menu in userMenu" :key="menu._id">
    <!-- 如果父级菜单有子菜单 -->
    <el-sub-menu
      v-if="
        menu.children &&
        menu.children.length > 0 &&
        menu.children[0].menuType == 1
      "
      :index="menu.path"
    >
      <template #title>
        <i :class="menu.icon"></i>
        <span>{{ menu.menuName }}</span>
      </template>
      <!-- 如果有子菜单子菜单作为参数调用自身 递归-->
      <tree-menu :userMenu="menu.children" />
    </el-sub-menu>
    <el-menu-item
      v-else-if="menu.menuType == 1"
      :index="menu.path"
      @click="clickMenu(menu.menuName, menu.path)"
    >
      {{ menu.menuName }}
    </el-menu-item>
  </template>
</template>

<script>
import { useStore } from 'vuex';
export default {
  name: 'TreeMenu',
  props: {
    userMenu: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  setup() {
    const store = useStore();
    const clickMenu = (menuName, menuPth) => {
      let openedTabs = store.state.openedTabs;
      const menuInfo = { title: menuName, name: menuPth };
      let res = openedTabs.find((item) => item.title == menuName);
      if (res === undefined) {
        store.commit('addTab', menuInfo);
      } else {
        store.commit('changeTab', menuInfo);
      }
    };
    return { clickMenu };
  },
};
</script>
